<template>
  <view class="example-container">
    <view class="header">
      <text class="title">高德地图使用示例</text>
    </view>
    
    <!-- 当前位置 -->
    <view class="section">
      <text class="section-title">当前位置</text>
      <button @click="getCurrentLocation" :disabled="loading">
        {{ loading ? '获取中...' : '获取当前位置' }}
      </button>
      <text class="result">{{ currentLocation }}</text>
    </view>
    
    <!-- 地址搜索 -->
    <view class="section">
      <text class="section-title">地址搜索</text>
      <input 
        v-model="searchKeyword" 
        placeholder="输入搜索关键词"
        class="search-input"
      />
      <button @click="searchLocation" :disabled="searching">
        {{ searching ? '搜索中...' : '搜索地址' }}
      </button>
      
      <view class="search-results">
        <view 
          v-for="(item, index) in searchResults" 
          :key="index"
          class="result-item"
          @click="selectLocation(item)"
        >
          <text class="name">{{ item.name }}</text>
          <text class="address">{{ item.address }}</text>
          <text class="distance" v-if="item.distanceText">{{ item.distanceText }}</text>
        </view>
      </view>
    </view>
    
    <!-- 逆地址解析 -->
    <view class="section">
      <text class="section-title">逆地址解析</text>
      <view class="coords-input">
        <input v-model="longitude" placeholder="经度" class="coord-input" />
        <input v-model="latitude" placeholder="纬度" class="coord-input" />
      </view>
      <button @click="reverseLocation" :disabled="reversing">
        {{ reversing ? '解析中...' : '逆地址解析' }}
      </button>
      <text class="result">{{ reverseResult }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { reverseGeocoding, searchAddress, formatDistance } from '@/utils/amap.js'

// 响应式数据
const loading = ref(false)
const searching = ref(false)
const reversing = ref(false)
const currentLocation = ref('')
const searchKeyword = ref('')
const searchResults = ref([])
const longitude = ref('116.397428')
const latitude = ref('39.90923')
const reverseResult = ref('')

// 获取当前位置
const getCurrentLocation = () => {
  loading.value = true
  currentLocation.value = ''
  
  uni.getLocation({
    type: 'gcj02',
    success: async (res) => {
      try {
        const result = await reverseGeocoding(res.longitude, res.latitude)
        if (result.success) {
          currentLocation.value = result.data.formatted_address
        } else {
          currentLocation.value = '解析失败: ' + result.error
        }
      } catch (error) {
        currentLocation.value = '获取失败: ' + error.message
      } finally {
        loading.value = false
      }
    },
    fail: (error) => {
      currentLocation.value = '获取位置失败: ' + error.errMsg
      loading.value = false
    }
  })
}

// 搜索地址
const searchLocation = async () => {
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键词',
      icon: 'none'
    })
    return
  }
  
  searching.value = true
  searchResults.value = []
  
  try {
    const result = await searchAddress(searchKeyword.value, '', 1, 10)
    if (result.success) {
      searchResults.value = result.data.list.map(item => ({
        ...item,
        distanceText: item.distance ? formatDistance(item.distance) : ''
      }))
    } else {
      uni.showToast({
        title: '搜索失败: ' + result.error,
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '搜索失败: ' + error.message,
      icon: 'none'
    })
  } finally {
    searching.value = false
  }
}

// 逆地址解析
const reverseLocation = async () => {
  if (!longitude.value || !latitude.value) {
    uni.showToast({
      title: '请输入经纬度',
      icon: 'none'
    })
    return
  }
  
  reversing.value = true
  reverseResult.value = ''
  
  try {
    const result = await reverseGeocoding(
      parseFloat(longitude.value), 
      parseFloat(latitude.value)
    )
    if (result.success) {
      reverseResult.value = result.data.formatted_address
    } else {
      reverseResult.value = '解析失败: ' + result.error
    }
  } catch (error) {
    reverseResult.value = '解析失败: ' + error.message
  } finally {
    reversing.value = false
  }
}

// 选择位置
const selectLocation = (location) => {
  uni.showToast({
    title: `选择了: ${location.name}`,
    icon: 'success'
  })
  console.log('选择的位置:', location)
}
</script>

<style scoped>
.example-container {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.section {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.search-input {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.coords-input {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.coord-input {
  flex: 1;
  height: 80rpx;
  background-color: #fff;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

button {
  width: 100%;
  height: 80rpx;
  background-color: #54cbc4;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

button[disabled] {
  background-color: #ccc;
}

.result {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  word-break: break-all;
}

.search-results {
  margin-top: 20rpx;
}

.result-item {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  border: 1rpx solid #eee;
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.address {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.distance {
  font-size: 24rpx;
  color: #54cbc4;
  background-color: #e6f7f6;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}
</style>
